import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:live_music/components/feedback/PageFeedBack.dart';
import 'package:live_music/components/index/momentCard.dart';
import 'package:live_music/components/ui/theme.dart';
import 'package:live_music/models/topic_detail_model.dart';
import 'package:live_music/pages/friendList/widget/list_card_friend.dart';
import 'package:live_music/pages/publish/widget/friend_card.dart';
import 'package:live_music/pages/publish/widget/topic_card.dart';
import 'package:live_music/pages/topic/widget/list_card_topic.dart';
import 'package:live_music/services/topicService.dart';

class TopicListPublish extends StatefulWidget {
  final int type;
  TopicListPublish({Key key, this.type}) : super(key: key);

  @override
  _TopicListPublishState createState() => _TopicListPublishState();
}

class _TopicListPublishState extends State<TopicListPublish>
    with AutomaticKeepAliveClientMixin {
  // 下拉刷新控制器
  EasyRefreshController _easyRefreshController;
  // 独立的滚动视图 防止tab切换时触发下拉刷新
  ScrollController _scrollController;
  // 列表数组模型
  List<TopicDetailModel> _topicListModel;
  int pageNo = 1;
  int pageSize = 20;
  bool hasMore = true;
  bool loading = true;
  bool error = false;
  String errorMsg;
  String keyWord = "";
  @override
  void initState() {
    super.initState();
    _easyRefreshController = EasyRefreshController();
    _scrollController = ScrollController();
    getData();
  }

  @override
  void dispose() {
    _easyRefreshController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  getData({bool replace = true}) async {
    try {
      Map<String, dynamic> data = {
        "pageNo": pageNo,
        "pageSize": pageSize,
        "name": keyWord
      };
      Map<String, dynamic> result;
      if (widget.type == 1) {
        result = await TopicService.queryTopic(data);
      } else {
        result = await TopicService.queryHotTopic(data);
      }
      List<dynamic> topicList = result['body'];
      TopicListModel topicListModel = TopicListModel.fromJson(topicList);
      setState(() {
        pageNo++;
        hasMore = pageSize == topicListModel.list.length;
        if (replace) {
          _topicListModel = topicListModel.list;
        } else {
          _topicListModel.addAll(topicListModel.list);
        }
      });
    } catch (e) {
      setState(() {
        error = true;
        errorMsg = e.toString();
      });
    } finally {
      setState(() {
        loading = false;
      });
    }
  }

  // 刷新回调(null为不开启刷新)
  Future _onRefresh() async {
    setState(() {
      pageNo = 1;
    });
    await getData(replace: true);
    if (error) {
      setState(() => error = false);
    }
    // 恢复刷新状态 使onLoad再次可用
    _easyRefreshController.resetLoadState();
  }

  // 加载回调(null为不开启加载)
  Future _onLoad() async {
    if (hasMore) {
      await getData(replace: false);
    }
    // // 结束加载
    _easyRefreshController.finishLoad(success: true, noMore: !hasMore);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    double screeHeight = MediaQuery.of(context).size.height;
    return Column(children: [
      search(),
      Container(
          height: screeHeight - 144,
          child: EasyRefresh(
              firstRefresh: false,
              firstRefreshWidget: PageFeedBack(firstRefresh: true).build(),
              emptyWidget: PageFeedBack(
                loading: loading,
                error: error,
                empty: _topicListModel.isEmpty,
                errorMsg: errorMsg,
                onErrorTap: () => _easyRefreshController.callRefresh(),
                onEmptyTap: () => _easyRefreshController.callRefresh(),
              ).build(),
              header: PhoenixHeader(),
              footer: ClassicalFooter(),
              controller: _easyRefreshController,
              enableControlFinishRefresh: false,
              enableControlFinishLoad: true,
              onRefresh: _onRefresh,
              onLoad: _topicListModel.isEmpty ? null : _onLoad,
              child: GridView.count(
                  padding: const EdgeInsets.all(4),
                  mainAxisSpacing: 4,
                  crossAxisSpacing: 4,
                  crossAxisCount: 2,
                  childAspectRatio: 0.9,
                  children: _topicListModel.map((item) {
                    return TopicCardPublish(topicItem: item);
                  }).toList())))
    ]);
  }

  Container search() {
    return Container(
      margin: const EdgeInsets.only(top: 12),
      padding: const EdgeInsets.symmetric(horizontal: 12),
      height: 36,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24),
          color: WcaoTheme.bgColor,
        ),
        child: TextField(
          enableSuggestions: false,
          autocorrect: false,
          style: TextStyle(fontSize: WcaoTheme.fsBase),
          onChanged: (val) {
            setState(() {
              keyWord = val;
            });
          },
          onSubmitted: (val) {
            setState(() {
              keyWord = val;
            });
            _onRefresh();
          },
          decoration: const InputDecoration(
            hintText: "请输入搜索关键词",
            contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 16),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide.none,
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide.none,
            ),
          ),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
